<!DOCTYPE html>
<html lang="en">


<head>

    <meta charset="UTF-8" />
    <title>有点小酷的光影卡片特效</title>
    <style>
        @charset "UTF-8";

        @property --hue {
            syntax: '<number>';
            inherits: true;
            initial-value: 0;
        }

        @property --rotate {
            syntax: '<number>';
            inherits: true;
            initial-value: 0;
        }

        @property --bg-y {
            syntax: '<number>';
            inherits: true;
            initial-value: 0;
        }

        @property --bg-x {
            syntax: '<number>';
            inherits: true;
            initial-value: 0;
        }

        @property --glow-translate-y {
            syntax: '<number>';
            inherits: true;
            initial-value: 0;
        }

        @property --bg-size {
            syntax: '<number>';
            inherits: true;
            initial-value: 0;
        }

        @property --glow-opacity {
            syntax: '<number>';
            inherits: true;
            initial-value: 0;
        }

        @property --glow-blur {
            syntax: '<number>';
            inherits: true;
            initial-value: 0;
        }

        @property --glow-scale {
            syntax: '<number>';
            inherits: true;
            initial-value: 2;
        }

        @property --glow-radius {
            syntax: '<number>';
            inherits: true;
            initial-value: 2;
        }

        @property --white-shadow {
            syntax: '<number>';
            inherits: true;
            initial-value: 0;
        }

        :root {
            --debug: 0;
            --supported: 0;
            --not-supported: 0;
            --card-color: hsl(260deg 100% 3%);
            --text-color: hsl(260deg 10% 55%);
            --card-radius: 3.6vw;
            --card-width: 35vw;
            --border-width: 3px;
            --bg-size: 1;
            --hue: 0;
            --hue-speed: 1;
            --rotate: 0;
            --animation-speed: 4s;
            --interaction-speed: 0.55s;
            --glow-scale: 1.5;
            --scale-factor: 1;
            --glow-blur: 6;
            --glow-opacity: 1;
            --glow-radius: 100;
            --glow-rotate-unit: 1deg;
        }

        body::before,
        body::after {
            content: 'CSS.registerProperty is supported ✅';
            position: absolute;
            display: block;
            top: 8px;
            left: 0;
            right: 0;
            margin: auto;
            width: calc(100% - 160px);
            max-width: 380px;
            height: auto;
            padding: 8px;
            border-radius: 8px;
            background: #48b93c;
            color: white;
            text-align: center;
            font-family: sans-serif;
            z-index: var(--supported, 0);
            opacity: var(--supported, 0);
        }

        body::after {
            content: 'CSS.registerProperty is NOT supported ❌';
            background: #b93c3c;
            z-index: var(--not-supported, 0);
            opacity: var(--not-supported, 0);
        }

        body::before,
        body::after {
            display: none !important;
        }

        html,
        body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }

        *,
        *:before,
        *:after {
            outline: calc(var(--debug) * 1px) red dashed;
        }

        body {
            background-color: var(--card-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Mona Sans', sans-serif;
        }

        body>div {
            width: var(--card-width);
            width: min(480px, var(--card-width));
            aspect-ratio: 1.5/1;
            color: white;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
            border-radius: var(--card-radius);
            cursor: pointer;
        }

        body>div:hover>div {
            mix-blend-mode: darken;
            --text-color: white;
            box-shadow: 0 0 calc(var(--white-shadow) * 1vw) calc(var(--white-shadow) * 0.15vw) rgba(255, 255, 255, 0.2);
            animation: shadow-pulse calc(var(--animation-speed) * 2) linear infinite;
        }

        body>div:hover>div:before {
            --bg-size: 15;
            animation-play-state: paused;
            transition: --bg-size var(--interaction-speed) ease;
        }

        body>div:hover .glow {
            --glow-blur: 1.5;
            --glow-opacity: 0.6;
            --glow-scale: 2.5;
            --glow-radius: 0;
            --rotate: 900;
            --glow-rotate-unit: 0;
            --scale-factor: 1.25;
            animation-play-state: paused;
        }

        body>div:hover .glow:after {
            --glow-translate-y: 0;
            animation-play-state: paused;
            transition: --glow-translate-y 0s ease, --glow-blur 0.05s ease, --glow-opacity 0.05s ease, --glow-scale 0.05s ease, --glow-radius 0.05s ease;
        }

        body>div:before,
        body>div:after {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: var(--card-radius);
        }

        body>div>div {
            position: absolute;
            width: 100%;
            height: 100%;
            background: var(--card-color);
            border-radius: calc(calc(var(--card-radius) * 0.9));
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            text-transform: uppercase;
            font-stretch: 150%;
            font-size: 18px;
            font-size: clamp(1.5vw, 1.5vmin, 32px);
            color: var(--text-color);
            padding: calc(var(--card-width) / 8);
        }

        body>div>div span {
            display: inline-block;
            padding: 0.25em;
            border-radius: 4px;
            background: var(--text-color);
            color: black;
            margin-right: 8px;
            font-weight: 900;
        }

        body>div>div:before {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: calc(calc(var(--card-radius) * 0.9));
            box-shadow: 0 0 20px black;
            mix-blend-mode: color-burn;
            z-index: -1;
            background: #292929 radial-gradient(30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%), hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 90%) calc(0% * var(--bg-size)), hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 80%) calc(20% * var(--bg-size)), hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 60%) calc(40% * var(--bg-size)), transparent 100%);
            width: calc(100% + var(--border-width));
            height: calc(100% + var(--border-width));
            animation: hue-animation var(--animation-speed) linear infinite, rotate-bg var(--animation-speed) linear infinite;
            transition: --bg-size var(--interaction-speed) ease;
        }

        body>div .glow {
            --glow-translate-y: 0;
            display: block;
            position: absolute;
            width: calc(var(--card-width) / 5);
            height: calc(var(--card-width) / 5);
            animation: rotate var(--animation-speed) linear infinite;
            transform: rotateZ(calc(var(--rotate) * var(--glow-rotate-unit)));
            transform-origin: center;
            border-radius: calc(var(--glow-radius) * 10vw);
        }

        body>div .glow:after {
            content: '';
            display: block;
            z-index: -2;
            filter: blur(calc(var(--glow-blur) * 10px));
            width: 130%;
            height: 130%;
            left: -15%;
            top: -15%;
            background: hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 60%);
            position: relative;
            border-radius: calc(var(--glow-radius) * 10vw);
            animation: hue-animation var(--animation-speed) linear infinite;
            transform: scaleY(calc(var(--glow-scale) * var(--scale-factor) / 1.1)) scaleX(calc(var(--glow-scale) * var(--scale-factor) * 1.2)) translateY(calc(var(--glow-translate-y) * 1%));
            opacity: var(--glow-opacity);
        }

        @keyframes shadow-pulse {

            0%,
            24%,
            46%,
            73%,
            96% {
                --white-shadow: 0.5;
            }

            12%,
            28%,
            41%,
            63%,
            75%,
            82%,
            98% {
                --white-shadow: 2.5;
            }

            6%,
            32%,
            57% {
                --white-shadow: 1.3;
            }

            18%,
            52%,
            88% {
                --white-shadow: 3.5;
            }
        }

        @keyframes rotate-bg {
            0% {
                --bg-x: 0;
                --bg-y: 0;
            }

            25% {
                --bg-x: 100;
                --bg-y: 0;
            }

            50% {
                --bg-x: 100;
                --bg-y: 100;
            }

            75% {
                --bg-x: 0;
                --bg-y: 100;
            }

            100% {
                --bg-x: 0;
                --bg-y: 0;
            }
        }

        @keyframes rotate {
            from {
                --rotate: -70;
                --glow-translate-y: -65;
            }

            25% {
                --glow-translate-y: -65;
            }

            50% {
                --glow-translate-y: -65;
            }

            60%,
            75% {
                --glow-translate-y: -65;
            }

            85% {
                --glow-translate-y: -65;
            }

            to {
                --rotate: calc(360 - 70);
                --glow-translate-y: -65;
            }
        }

        @keyframes hue-animation {
            0% {
                --hue: 0;
            }

            100% {
                --hue: 360;
            }
        }
    </style>

</head>


<body>
    <div role="button"><span class="glow"></span>
        <div><span>cool</span>Glowing shadows</div>
    </div>
    <script>if (typeof window.CSS.registerProperty === 'function') { console.log('CSS.registerProperty supported 🎉'); document.body.style.setProperty('--supported', 1); document.body.classList.add('registerProperty-supported') } else { console.log('CSS.registerProperty not supported ❌'); document.body.style.setProperty('--not-supported', 1); document.body.classList.add('registerProperty-not-supported') }</script>

</body>

</html>